<template>
    <div class="discuss">
        <p style="font-size:16px">小组讨论区</p>
        <span style="font-size:12px">
            欢迎分享，鼓励原创，无论是你的学习体验、想法、工作生活经验，还是好书、好文章、好资源，都可发在这里。
        </span>
        <div style="height:40px">
            <Button type="success" @click="discussModal = true" style="float:right;color:#fff;">{{ $t('langObj.discuss') }}</Button>
        </div>
        <div>
             <discuss-list v-for="(item,index) in allDiscussArr" :key="index" :item="item"></discuss-list>
        </div>
        <Modal
        v-model="discussModal"
        :title="$t('langObj.discuss')"
        width="360"
        :mask-closable="false">
            <Input type="textarea" placeholder="在此输入文字" :rows="5" v-model="content"/>
            <div slot="footer">
                <Button type="success" @click="submitResultModal">{{ $t('langObj.submit') }}</Button>
            </div>  
        </Modal>
    </div>
</template>

<script>
import discussList from '@/components/education/lists/discussList'
import { mapActions } from 'vuex';
export default {
    components:{discussList},
    data(){
        return{
            discussModal:false,
            content:"",
            allDiscussArr:[],
        }
    },
    methods:{
        ...mapActions(['XgetdiscussList','XcreateDiscuss']),
        submitResultModal(){
            this.XcreateDiscuss({
                obj_id:this.$route.params.id,
                content:this.content,
                obj_type:"COURSE"
            }).then(res => {
                this.$Message.success("提交成功");
                this.discussModal = false;
                this.mountDiscussList()
            }).catch(err => {
                this.$Message.error(err.response.data.message);
            })
        },
        mountDiscussList(){
            this.XgetdiscussList({
                objId:this.$route.params.id,
                objType:"COURSE"
            }).then(res => {
                this.allDiscussArr = res.data.reverse()
            })
        }
    },
    mounted() {
        this.mountDiscussList()
    },
}
</script>

